<template>
  <div class="xingjizhanbi"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.getEchartData();
  },
  methods: {
    getEchartData() {
      const chart = document.querySelector(".xingjizhanbi");
      // console.log(chart);
      if (chart) {
        const myChart = this.$echarts.init(chart);
        const option = {
          tooltip: {
            trigger: "item",
            transitionDuration: 0,
          },
          legend: {
            selectedMode: false,
            textStyle: {
              // 样式设置
              fontSize: 14,
              color: "rgba(0, 0, 0, 0.65)",
              fontFamily: "PingFang Regular",
              fontWeight: "600",
            },
            itemHeight: "10",
            itemWidtt: "10",
            icon: "circle",
            orient: "vertical",
            top: "15%",
            right: "1%",
            // right: "left",
          },
          color: ["#F6BD16", "#5AD8A6", "#5B8FF9", "#5D7092"],
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["50%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },
              label: {
                normal: {
                  show: false,
                  position: "center",
                  formatter: function (data) {
                    // 设置圆饼图中间文字排版
                    return data.value + "个" + "\n" + data.name;
                  },
                },
              },
              emphasis: {
                label: {
                  position: "center",
                  show: true,
                  formatter: "{b}\n{c}个",
                  fontSize: "15",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 50, name: "三星" },
                { value: 50, name: "四星" },
                { value: 35, name: "五星" },
                { value: 20, name: "无星" },
              ],
            },
          ],
        };
        myChart.setOption(option, true);
        //设置默认选中高亮部分
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 3,
        });
        let index;
        myChart.on("mouseout", function (e) {
          index = e.dataIndex;

          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex,
          });
        });
        myChart.on("mouseover", function (e) {
          if (e.dataIndex != index) {
            myChart.dispatchAction({
              type: "downplay",
              seriesIndex: 0,
              dataIndex: index,
            });
          }
        });
        myChart.on("legendselectchanged", function (params) {
          // console.log(params);
        });
        myChart.on("selectchanged", function (e) {
    
        });

        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.xingjizhanbi {
  overflow: hidden;
  width: 400px;
  height: 190px;
  // margin: 0 auto;
}
</style>